<template>
	<view class="content">
		<view class="tabs">
			<div class="select">
				<uni-data-select border="0" v-model="value" :localdata="range" :clear="false"></uni-data-select>
			</div>
			<u-tabs style="position: relative;" :list="list1" lineWidth="40" lineColor="#3cc51f" :activeStyle="{
					            color: '#3cc51f',
					            fontWeight: 'bold',
					            transform: 'scale(1.05)'
					        }" @click="tab">
				<view slot="right" style="padding-left: 4px;position: absolute;right: -230rpx;" @tap="searchMovies">
					<u-icon name="search" size="21" bold></u-icon>
				</view>
			</u-tabs>
		</view>
		<div class="container" :class="{ishot:hot}">
			<view class="hot">
				<view class="banner">
					<u-swiper :list="banners" keyName="image" showTitle :autoplay="true" height="200" circular
						indicator></u-swiper>
				</view>
				<view class="movieList" v-for="(item,index) in hotMovie" :key="index" >
					<view style="display: flex;" @click="movieDetails(item.id)">
						<view class="movieImg">
							<img :src="'http://172.21.63.114:10001/'+item.cover" alt="">
						</view>
						<view class="movieContent">
							<p class="title">{{item.name}}</p>
							<p class="score" style="float: left;">评分:</p>
							<u-rate count="5"  style="float: left;margin-top: 8rpx;" size="28rpx" active-color="#3cc51f" readonly v-model="item.score"></u-rate>
							<p style="clear: both;"> </p>
							<p class="introduction" v-html="item.introduction"></p>
									
							<p class="language">上映时间：{{item.playDate}}</p>
						</view>
					</view>
					<view class="buyMovie">
						<u-button size="small" @click="movieTime(item.id)">购票</u-button>
					</view>
				</view>
			
			</view>
			<view class="dai">
				<u--text text="近期热播" type="info" style="margin: 5px 0 0 0;"></u--text>
				<u-scroll-list indicatorWidth="30">
					<view v-for="(item, index) in loveMovies" :key="index" class="scrollView">
						<div class="movieImg"><image :src="'http://172.21.63.114:10001/'+item.cover" mode=""></image></div>
						<div>{{item.name}}</div>
						<div>播放：<span style="color: cadetblue;">{{item.favoriteNum}}</span>次</div>
					</view>
				</u-scroll-list>
				<view class="movieList" v-for="(item,index) in daiMovie" :key="index">
					<view class="movieImg">
						<img :src="'http://172.21.63.114:10001/'+item.cover" alt="">
					</view>
					<view class="movieContent">
						<p class="title">{{item.name}}</p>
						<p style="clear: both;"> </p>
						<p class="introduction" v-html="item.introduction"></p>
							
						<p class="language">上映时间：{{item.playDate}}</p>
					</view>
					<view class="buyMovie">
						<u-button size="small">预告</u-button>
					</view>
				</view>
			</view>
		</div>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list1: [{
						name: '热映'
					},
					{
						name: '待映'
					}
				],
				hot:true,
				banners: [],
				value: 0,
				range: [{
						value: 0,
						text: "广东"
					},
					{
						value: 1,
						text: "辽宁"
					},
					{
						value: 2,
						text: "河北"
					}
				],
				hotMovie: [],
				daiMovie: [],
				loveMovies:[],
			}
		},
		onLoad() {
			this.getBanners()
			this.getHotMovies()
			this.getDaiMovies()
			

		},
		methods: {
			getBanners() {
				this.$request({
					url: '/prod-api/api/movie/rotation/list',
					method: 'GET'
				}).then(res => {
					// console.log(res);
					res.data.rows.forEach(e => {
						this.banners.push({
							image: 'http://172.21.63.114:10001' + e.advImg,
						})
					})
				}).catch(err => {
					console.log(err);
				})
			},
			getHotMovies() {
				this.$request({
					url: '/prod-api/api/movie/film/list',
					method: 'GET'
				}).then(res => {
					
					this.hotMovie = res.data.rows
					this.loveMovies=res.data.rows.filter(o=> o.score=='5')
					
				}).catch(err => {
					console.log(err);
				})
			},
			tab(e) {
				
				if(e.index==0){
					this.hot=true
					
				}else{
					this.hot=false
				}
			},
			getDaiMovies() {
				this.$request({
					url: '/prod-api/api/movie/film/preview/list',
					method: 'GET'
				}).then(res => {
					
					this.daiMovie = res.data.rows
				}).catch(err => {
					console.log(err);
				})
			},
			searchMovies(){
				const allmove = JSON.stringify(this.AllMovies)
				uni.navigateTo({
					url:'/pages/SearchMovies/SearchMovies?moviesList='+allmove
				})
			},
			movieTime(id){
				uni.navigateTo({
					url:'/pages/MovieTimes/MovieTimes?movieId='+id
				})
				
			},
			movieDetails(id){
				uni.navigateTo({
					url:'/pages/movieDetails/movieDetails?movieId='+id
				})
			}
			
		},
		computed:{
			AllMovies(){
				return this.hotMovie.concat(this.daiMovie)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		/deep/.uni-select{
			border: 0;
		}
		.container{
			width: 1502rpx;
			transition: all .5s; 
			transform: translateX(-750rpx);
		}
		.ishot{
			transform: translateX(0rpx);
		}
		.tabs {
			display: flex;
			align-items: center;
			// justify-content: center;
			background-color: white;
			border-bottom:1px solid #eeeeee;
			.select {
				width: 160rpx;
				margin-left: 20rpx;
				margin-right: 100rpx;
			}
		}

		.hot {
			width: 749rpx;
			float: left;

			.movieList {
				display: flex;
				border-bottom: 2rpx solid #eeeeee;

				.movieImg {
					width: 160rpx;
					height: 220rpx;
					padding: 16rpx 30rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.movieContent {
					flex: 1;
					padding-top: 30rpx;

					.score,
					.language {
						font-size: 25rpx;
						margin: 5rpx 0;
					}

					.introduction {
						font-size: 25rpx;
						margin: 5rpx 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}

				.buyMovie {
					width: 120rpx;
					padding: 100rpx 30rpx 0 0;
					margin-left: auto;
					/deep/.u-button {
						color: #3cc51f;
						border-color: #3cc51f;
					}
				}
			}
		}

		.dai {
			width: 750rpx;
			margin-left: 3rpx;
			float: left;
			line-height: 40rpx;
			.scrollView{
				font-size: 24rpx;
				text-align: center;
				padding:10rpx 5rpx;
				.movieImg {
					width: 200rpx;
					height: 240rpx;
					padding: 16rpx 0rpx 5rpx ;
					image {
						width: 180rpx;
						height: 240rpx;
					}
				}
			}
			.movieList {
				display: flex;
				border-bottom: 2rpx solid #eeeeee;
			
				.movieImg {
					width: 160rpx;
					height: 220rpx;
					padding: 16rpx 30rpx;
			
					img {
						width: 100%;
						height: 100%;
					}
				}
			
				.movieContent {
					flex: 1;
					padding-top: 30rpx;
			
					.score,
					.language {
						font-size: 25rpx;
						margin: 5rpx 0;
					}
			
					.introduction {
						font-size: 25rpx;
						margin: 5rpx 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			
				.buyMovie {
					width: 120rpx;
					padding: 100rpx 20rpx 0 0;
			
					/deep/.u-button {
						color: #3cc51f;
						border-color: #3cc51f;
					}
				}
			}
			
		}
	}
</style>